<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片模块 -->
    <el-card>
      <el-row :gutter="6">
        <el-col :span="6"
          ><el-button type="primary">添加角色</el-button></el-col
        >
      </el-row>
      <el-table :data="rolesList" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              :class="['bdbottom', index == 0 ? 'bdtop' : '']"
              v-for="(item1, index) in scope.row.children"
              :key="item1.id"
            >
              <!-- 渲染一级标签 -->
              <el-col :span="5">
                <el-tag
                  type="primary"
                  closable
                  @close="removeTayById(item1.id)"
                  >{{ item1.authName }}</el-tag
                >
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 渲染二级 和三级标签 -->
              <el-col :span="19">
                <el-row
                  :class="[index == 0 ? '' : 'bdtop']"
                  v-for="(item2, index) in item1.children"
                  :key="item2.id"
                >
                  <!--for循环 二级标签 -->
                  <el-col :span="6">
                    <el-tag
                      type="success"
                      cloasble
                      @close="removeTayById(item2.id)"
                      >{{ item2.authName }}</el-tag
                    >
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!-- 三级标签 -->
                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      closable
                      @close="removeTayById(item3.id)"
                      v-for="item3 in item2.children"
                      :key="item3.id"
                    >
                      {{ item3.authName }}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
        <el-table-column prop="prop" label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini"
              >编辑</el-button
            >
            <el-button type="danger" icon="el-icon-delete" size="mini"
              >删除</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="showSetRightsDiaylog(scope.row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 显示设置权限dialog -->
      <el-dialog
        title="分配权限"
        :visible.sync="setRightsDialogVisibly"
        width="50%"
        @close="setRightsDialogClose"
      >
        <!-- 树形结构 -->
        <el-tree
          show-checkbox
          :data="rightList"
          :props="roleDataPros"
          node-key="id"
          :default-checked-keys="defKeys"
        >
        </el-tree>
        <div slot="footer">
          <el-button @click="setRightsDialogVisibly = false">取 消</el-button>
          <el-button type="primary" @click="setRightsDialogVisibly = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rolesList: [],
      // 控制分配权限对话框的显示与隐藏
      setRightsDialogVisibly: false,
      //权限列表
      rightList: [],
      //树结构数据
      roleDataPros: {
        label: 'authName',
        children: 'children',
      },
      // 默认选中的节点Id值数组
      defKeys: [],
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 获取用户角色列表
    getRoleList() {
      var roleList = [
        {
          id: 30,
          roleName: '主管',
          roleDesc: '技术负责人',
          children: [
            {
              id: 101,
              authName: '商品管理',
              path: 'goods',
              pid: 0,
              level: 1,
              children: [
                {
                  id: 201,
                  authName: '商品列表',
                  path: null,
                  pid: 101,
                  children: [
                    {
                      id: 301,
                      authName: '添加商品',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 302,
                      authName: '编辑商品',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 303,
                      authName: '删除商品',
                      path: null,
                      pid: '104,101',
                    },
                  ],
                },
                {
                  id: 202,
                  authName: '分类参数',
                  path: null,
                  pid: 101,
                  children: [
                    {
                      id: 304,
                      authName: '获取参数列表',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 305,
                      authName: '创建商品参数',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 306,
                      authName: '删除商品参数',
                      path: null,
                      pid: '104,101',
                    },
                  ],
                },
                {
                  id: 203,
                  authName: '商品分类',
                  path: null,
                  pid: 101,
                  children: [
                    {
                      id: 307,
                      authName: '获取商品分类',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 308,
                      authName: '创建商品分类',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 309,
                      authName: '删除商品分类',
                      path: null,
                      pid: '104,101',
                    },
                  ],
                },
              ],
            },
            {
              id: 102,
              authName: '用户管理',
              path: 'users',
              pid: 0,
              level: 2,
              children: [
                {
                  id: 204,
                  authName: '用户列表',
                  path: null,
                  pid: 101,
                  children: [
                    {
                      id: 310,
                      authName: '添加用户',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 311,
                      authName: '编辑用户',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 312,
                      authName: '删除用户',
                      path: null,
                      pid: '104,101',
                    },
                  ],
                },
              ],
            },
            {
              id: 103,
              authName: '权限管理',
              path: 'rights',
              pid: 0,
              level: 0,
              children: [
                {
                  id: 205,
                  authName: '权限列表',
                  path: null,
                  pid: 101,
                  children: [
                    {
                      id: 313,
                      authName: '添加权限',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 314,
                      authName: '编辑权限',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 315,
                      authName: '删除权限',
                      path: null,
                      pid: '104,101',
                    },
                  ],
                },
                {
                  id: 206,
                  authName: '角色列表',
                  path: null,
                  pid: 101,
                  children: [
                    {
                      id: 316,
                      authName: '添加角色',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 317,
                      authName: '编辑角色',
                      path: null,
                      pid: '104,101',
                    },
                    {
                      id: 318,
                      authName: '删除角色',
                      path: null,
                      pid: '104,101',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ]

      this.rolesList = roleList
    },

    getUserRightList() {
      var rightLists = [
        {
          id: 101,
          authName: '商品管理',
          path: 'goods',
          pid: 0,
          level: 1,
          children: [
            {
              id: 201,
              authName: '商品列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 301,
                  authName: '添加商品',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 302,
                  authName: '编辑商品',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 303,
                  authName: '删除商品',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
            {
              id: 202,
              authName: '分类参数',
              path: null,
              pid: 101,
              children: [
                {
                  id: 304,
                  authName: '获取参数列表',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 305,
                  authName: '创建商品参数',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 306,
                  authName: '删除商品参数',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
            {
              id: 203,
              authName: '商品分类',
              path: null,
              pid: 101,
              children: [
                {
                  id: 307,
                  authName: '获取商品分类',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 308,
                  authName: '创建商品分类',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 309,
                  authName: '删除商品分类',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
          ],
        },
        {
          id: 102,
          authName: '用户管理',
          path: 'users',
          pid: 0,
          level: 2,
          children: [
            {
              id: 204,
              authName: '用户列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 310,
                  authName: '添加用户',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 311,
                  authName: '编辑用户',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 312,
                  authName: '删除用户',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
          ],
        },
        {
          id: 103,
          authName: '权限管理',
          path: 'rights',
          pid: 0,
          level: 0,
          children: [
            {
              id: 205,
              authName: '权限列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 313,
                  authName: '添加权限',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 314,
                  authName: '编辑权限',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 315,
                  authName: '删除权限',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
            {
              id: 206,
              authName: '角色列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 316,
                  authName: '添加角色',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 317,
                  authName: '编辑角色',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 318,
                  authName: '删除角色',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
          ],
        },
         {
          id: 104,
          authName: '订单管理',
          path: 'rights',
          pid: 0,
          level: 0,
          children: [
            {
              id: 207,
              authName: '订单列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 319,
                  authName: '添加权限',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 320,
                  authName: '编辑权限',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 321,
                  authName: '删除权限',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
            {
              id: 208,
              authName: '订单分类',
              path: null,
              pid: 101,
              children: [
                {
                  id: 322,
                  authName: '添加分类',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 323,
                  authName: '编辑分类',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 324,
                  authName: '删除分类',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
          ],
        },
      ]

      this.rightList = rightLists
    },

    //删除权限标签
    async removeTayById(id) {
      var reslutRemove = await this.$confirm(
        '此操作将永久删除改权限，是否继续',
        '提示',
        {
          confirmButtonText: '确定',
          cnacleButtonText: '取消',
          type: 'warning',
        }
      ).catch((error) => error)

      if (reslutRemove != 'confirm') {
        return this.$message.info('取消了删除')
      }
    },
    //分配橘色弹窗
    showSetRightsDiaylog(roleData) {
      this.getUserRightList()
      this.getNodeKeys(roleData, this.defKeys)
      console.log(this.defKeys);
      console.log(this.rightList);
      this.setRightsDialogVisibly = true
    },
    //通过递归的形式，获取角色下所有三级权限的id，并保存到 defKeys 数组中
    getNodeKeys(node, arr) {
      if (!node.children) {
       return arr.push(node.id)
      }

      node.children.forEach((element) => this.getNodeKeys(element, arr))
    },
    setRightsDialogClose() {
      this.defKeys = []
    },
  },
}
</script>

<style lang="less" scoped>
.el-tag {
  margin: 7px;
}
.bdtop {
  border-top: 1px solid #eee;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
</style>